<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            user-select: none;
            z-index: -1000;
        }
        .content{
            position: relative;
            font-size: 40px;
            letter-spacing: 10px;
            border: 10px solid black;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-image: linear-gradient(to right bottom, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%, #7ac5d8 100%, #b49fda 79%, #57c6e1 42%, #bbc1bf 19%, #eea2a2 0%);
            border-radius: 20px;
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px whitesmoke;
            animation: animation 3s linear 0s infinite  none;
        }
        .content::after{
            position: absolute;
            z-index: -10;
            content: '';
            width: 110%;
            height: 160%;
            background-image: linear-gradient(to bottom right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%, #7ac5d8 100%, #b49fda 79%, #57c6e1 42%, #bbc1bf 19%, #eea2a2 0%);
            left: -5%;
            top: -30%;
            filter: blur(5px);
            border-radius: 20px;
            box-shadow: 0 0 15px white;
            background-size: 300%;
            animation: animation 3s linear 0s infinite none;
        }
        .content::before{
            z-index: -9;
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: gray;
            border-radius: 5px;
        }
        @keyframes animation {
            0%{
                background-position: 0%;
            }
            50%{
                background-position: 50%;
            }
            100%{
                background-position: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="content" id="content"></div>
    <script>
        let time = document.getElementById('content')
        let timer = setInterval(()=>{
            time.innerText = new Date().toLocaleTimeString()
        },900)
    </script>
</body>
</html>